<template>
	<view class="page pad">
		<view class="user-header">
			<view class="user-info-box">
				<image :src="info.avatar"  class="avatar-img"></image>
				<!-- <view></view> -->
				<view class="user-info">
					<view class="item1">
						{{ info.nickname }}
					</view>
					<view class="item3" v-if="info.phone !== ''">
						{{ info.phone }}
					</view>
					<view class="item3" v-if="myInfo.one_stop_id !== 0">
						{{ myInfo.one_stop_name }}
					</view>
				</view>
			</view>
			<navigator url="./setting" hover-class="none" class="icon-set-box flex-center">
				<image src="/static/images/mallShop/set.png" class="icon-set" mode=""></image>
			</navigator>
		</view>
		<view class="box-shadow">
			<view class="title-box">
				<view class="title">
					我的订单
				</view>
				<navigator url="./order?id=0" class="more-btn" hover-class="none" >查看更多</navigator>
			</view>
			<view class="order-list">
				<navigator :url="'./order?id='+(i+1)" class="order-menu" v-for="(a,i) in orderMenu">
					<view class="icon-box">
						<image :src="a.icon" class="icon-order-menu" mode=""></image>
					</view>
					<view class="nav-text">
						{{a.name}}
					</view>
				</navigator>
			</view>
		</view>
		<view class="box-shadow mt20">
			<view class="title-box">
				<view class="title">
					我的钱包
				</view>
				<navigator url="./income" class="more-btn" hover-class="none" >收支明细</navigator>
			</view>
			<view class="wallet-box">
				<view class="wallet-item">
					<view class="wallet-num">
						<view class="wallet-price">
							<text class="int">{{wallet.freeze_balance[0]}}</text>.{{wallet.freeze_balance[1]}}
						</view>
						<view class="text-info">
							我的仓单（CD ￥）
						</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="wallet-item">
					<view class="wallet-num">
						<view class="wallet-price withdraw-box">
							<text class="int">{{wallet.expend_money[0]}}</text>.{{wallet.expend_money[1]}}
							<view @tap="withdrawal" hover-class="none" class="withdraw-btn">去提现</view>
						</view>
					</view>
					<view class="text-info">
						现金收益 （元）
					</view>
				</view>
			</view>
		</view>
		<view class="box-shadow mt20">
			<view class="title-box">
				<view class="title">
					我的服务
				</view>
			</view>
			<view class="service-list">
				<view class="service-item" :url="a.url" hover-class="none" v-for="(a,i) in serviceMenu" @tap="goUrl(a)">
					<view class="img-box">
						<image :src="a.icon" class="icon-img" mode=""></image>
					</view>
					<view class="text-info">
						{{a.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="box-shadow mt20">
			<view class="title-box">
				<view class="title">
					更多服务
				</view>
			</view>
			<view class="service-list">
				<view class="service-item" hover-class="none" v-for="(a,i) in moreMenu" @tap="goUrl(a)">
					<view class="img-box">
						<image :src="a.icon" class="icon-img" mode=""></image>
					</view>
					<view class="text-info">
						{{a.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="foot-margin"></view>
		<MallFoot :on="3"></MallFoot>
	</view>
</template>

<script>
	import MallFoot from '@/components/mallFoot/mallFoot'
	import {isLogin, myCenter, wallet} from '@/api/substitution.js'
	
	export default {
		components:{
			MallFoot
		},
		data() {
			return {
				orderMenu:[
					{
					name:'待支付',
					icon:'/static/images/mallShop/pay1.png',
				},{
					name:'待发货',
					icon:'/static/images/mallShop/pay2.png',
				},{
					name:'待收货',
					icon:'/static/images/mallShop/pay3.png',
				},{
					name:'待评价',
					icon:'/static/images/mallShop/pay4.png',
				}],
				userInfo:{},
				wallet:{
					expend_money: '',
					freeze_balance: '',
				},
				serviceMenu:[{
					name:'我的推广',
					icon:'/static/images/mallShop/service1.png',
					url:'popularize',
				},{
					name:'我的评价',
					icon:'/static/images/mallShop/service2.png',
					url:'',
				},{
					name:'联系客服',
					icon:'/static/images/mallShop/service3.png',
					url:'',
				},{
					name:'我的消息',
					icon:'/static/images/mallShop/service4.png',
					url:'',
				},{
					name:'关于公司',
					icon:'/static/images/mallShop/service5.png',
					url:'./company',
				}],
				moreMenu:[{
					name:'附近商家',
					icon:'/static/images/mallShop/smore1.png',
					url:'/mallShop/home/merchants',
				},{
					name:'商家二维码',
					icon:'/static/images/mallShop/smore2.png',
					url:'./code',
					check: false
				},{
					name:'转账给商家',
					icon:'/static/images/mallShop/smore3.png',
					url:'./checked',
				},{
					name:'扫一扫',
					icon:'/static/images/mallShop/smore4.png',
					url:'',
				},{
					name:'收货地址',
					icon:'/static/images/mallShop/smore5.png',
					url:'./addressList',
				}],
				myInfo: ''
			}
		},
		onShow() {
			this.info = uni.getStorageSync('userInfo')
			isLogin();
			this.getWallet();
			this.getUserInfoData();
			// this.login();
		},
		onLoad() {
			isLogin()
		},
		methods: {
			
			// 个人钱包
			getWallet(){
				wallet().then(res => {
					this.wallet.freeze_balance = res.data.userInfo.balance.toString().split('.')
					this.wallet.expend_money = res.data.userInfo.sharing_balance.toString().split('.')
				})				
			},
			
			// 跳转页面
			goUrl (e) {
				switch (e.name) {
					case '商家二维码':
						uni.showToast({
							title: '当前用户不是商家',
							icon: 'none'
						})
						break;
					// case '我的推广':
					// 	uni.showToast({
					// 		title: '该功能正在开发中',
					// 		icon: 'none'
					// 	})
					// 	break;
					case '我的评价':
						uni.showToast({
							title: '该功能正在开发中',
							icon: 'none'
						})
						break;
					case '联系客服':
						uni.showToast({
							title: '该功能正在开发中',
							icon: 'none'
						})
						break;
					case '我的消息':
						uni.showToast({
							title: '该功能正在开发中',
							icon: 'none'
						})
						break;
					case '附近商家':
						uni.showToast({
							title: '该功能正在开发中',
							icon: 'none'
						})
						break;
					case '转账给商家':
						uni.showToast({
							title: '该功能正在开发中',
							icon: 'none'
						})
						break;
					case '扫一扫':
						uni.scanCode({
							onlyFromCamera: false,
							success(res) {
								alert(res)
							}
						})
						break;
					default:
						uni.navigateTo({
							url: './web?url='+e.url,
						})
				}
				/* uni.navigateTo({
					url: e
				}) */
			},
			
			// 提现
			withdrawal() {
				uni.showToast({
					title: '此功能暂未开放',
					icon: 'none'
				})
				// ./withdraw
			},
			
			// 个人中心信息
			getUserInfoData(){
				myCenter().then(res => {
					this.myInfo = res.data.userInfo
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import '/common/css/shop.css';
	@mixin flexCenter (){
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.page{
		background-color: #F5F5F5;
	}
	.user-header{
		display:flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 40rpx;
		height: 150rpx;
		.user-info-box{
			display: flex;
			align-items: center;
			.user-info{
				display: flex;
				flex-direction: column;
				align-items: baseline;
				justify-content: space-evenly;
				.item1{
					font-size: 32rpx;
					color: #333333;
				}
				.item2{
					font-size: 26rpx;
					color: #606266;
				}
				.item3{
					font-size: 26rpx;
					color: #606266;
				}
			}
			
		}
		.avatar-img{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50rpx;
			background-color: #cdcdcd;
			margin-right:25rpx;
		}
		.icon-set-box{
			width: 60rpx;
			height: 60rpx;
			.icon-set{
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	.box-shadow{
		padding: 30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		.title-box{
			display: flex;
			justify-content: space-between;
			height: 60rpx;
			align-items: center;
			.title{
				font-size: 32rpx;
				font-weight: bold;
			}
			.more-btn{
				font-size: 26rpx;
				color: #bbb;
			}
		}
	}
	.order-list{
		display: flex;
		margin-top:40rpx;
		.order-menu{
			flex:1;
			text-align: center;
			color: #333333;
			.icon-order-menu{
				width: 88rpx;
				height: 88rpx;
			}
			.nav-text{
				margin-top: 10rpx;
				font-size: 26rpx;
				color: #333333;
			}
		}
	}
	.mt50{
		margin-top: 50rpx;
	}
	.mt20{
		margin-top:20rpx;
	}
	.wallet-box{
		display: flex;
		margin-top:40rpx;
		.line{
			width: 4rpx;
			height: 60rpx;
			background-color: #CDCDCD;
			position: relative;
			top:20rpx;
			margin-right: 20rpx;
		}
		.wallet-item{
			flex:1;
			padding-left:30rpx;
			.wallet-price{
				height: 80rpx;
				font-size: 36rpx;
				text-align: center;
				font-weight: bold;
				.int{
					font-size: 48rpx;
				}
			}
			.text-info{
				font-size: 26rpx;
				color: #606266;
			}
		}
		.withdraw-box{
			.withdraw-btn{
				float:right;
				border:1px solid #FE7B47;
				font-weight: normal;
				color:#FE7B47;
				@include  flexCenter();
				height: 44rpx;
				width: 90rpx;
				border-radius: 22rpx;
				font-size: 22rpx;
			}
		}
	}
	.service-list{
		display: flex;
		margin-top: 40rpx;
		margin-left:-20rpx;
		margin-right:-20rpx;
		.service-item{
			flex:1;
			text-align: center;
			.icon-img{
				width: 70rpx;
				height: 70rpx;
			}
			.text-info{
				margin-top: 15rpx;
				font-size: 26rpx;
				
			}
		}
	}
	.foot-margin{
		height: 110rpx;
		margin-top:10rpx;
	}
	
</style>
